<template>
<div>
  <el-row>
    <el-radio-group v-model="radio">
      <el-radio label="text">text</el-radio>
      <el-radio label="picture">picture</el-radio>
      <el-radio label="picture-card">picture-card</el-radio>
    </el-radio-group>
    <el-upload
      :action="action"
      :http-request="uploadFile"
      name="file"
      :list-type="radio"
      :on-remove="handleRemove"
      :on-preview="handleRemove"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :data="{project:'adver', dir: 'adver-info-image'}"
    >
     <el-icon name="plus"></el-icon>
    </el-upload>
  </el-row>
  <div>
    <el-button @click="showMessage">show message</el-button>
    <!-- <demo-option ></demo-option> -->
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: 'picture-card',
      action: 'https://file-uat.chehezhi.cn/fileApi/1.0/uploadForUrl'
    }
  },
  components: {
    // DemoOption: () => (<div>jsx in vue</div>)
  },
  methods: {
    handleSuccess () {
      console.group('handleSuccess')
      console.log(arguments)
      console.groupEnd()
    },
    handleProgress () {
      console.group('handleProgress')
      console.log(arguments)
      console.groupEnd()
    },
    uploadFile (options) {
      console.group('http-requset')
      console.log(options)
      console.groupEnd()
      const formData = new FormData()
      Object.keys(options.data).forEach((key) => {
        formData.append(key, options.data[key])
      })
      formData.append('file', options.file)
      const config = {
        onUploadProgress (e) {
          console.group('execute onUploadProgress')
          console.log(e)
          console.groupEnd()
          if (e.total > 0) {
            e.percent = e.loaded / e.total * 100
          }
          options.onProgress(e)
        }
      }
      // return Axios.post(this.action, formData, config);
      // eslint-disable-next-line no-undef
      axios.post(this.action, formData, config)
        .then(a => options.onSuccess(a))
    },
    handleRemove () {
      console.group('handleRemove')
      console.log(arguments)
      console.groupEnd()
    },
    showMessage () {
      this.$msgbox({ title: 'hi ', message: '<span>hello world</span>', dangerouslyUseHTMLString: true })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
